<script setup>
import { useRouter } from "vue-router";
import { getActivityList, getActivityTags, getActivityTops, getActivityRecommend } from "@/api/activity";
import { onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import CommunityList from '@/components/communityList.vue'
import dayjs from 'dayjs'

import { useSeoMeta } from '#app'
useSeoMeta({
  title: '中国出海活动导航站-汇聚国内出海线上与线下活动、全球重要展销会、海外商业考察|贸行四海',
  description: '贸行四海活动频道，致力于为出海人群提供国内出海优质活动和海外重要展销会的参与窗口。我们按照活动举办所在地、主题、时间和形式，提供出海活动与展会的检索与报名功能，助力出海人群交流互动。',
  keywords: '深圳出海，上海出海，北京出海，广东出海，浙江出海，福建出海，江苏出海，山东出海',
  // ogTitle: '社交媒体分享标题',
  // ogDescription: '社交媒体分享描述',
  // ogImage: '社交媒体分享图片URL',
  // twitterCard: 'summary_large_image'
})

onMounted(() => {
  // getActivityListFun();
  getActivityTagsFun();
  getActivityTopsFun();
  getActivityRecommendFun();
})

// 热门推荐
const hotRecommend = ref({
  id: '',
  title: ''
})

// 获取热门推荐
const getActivityRecommendFun = () => {
  getActivityRecommend().then(res => {
    console.log(res)
    if (res.suc) {
      hotRecommend.value = res.data?.[0];
    }
  })
}


const activityList = ref([])
const total = ref(0);

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 12,
  "tagIds": [],
  "keyword": "",
  timeFilter: ''
})

const topActivityList = ref([])

const getActivityTopsFun = async () => {
  getActivityTops().then(res => {
    topActivityList.value = res.data;
  })
}

// 获取活动列表
const getActivityListFun = async () => {
  queryParams.value.tagIds = [];
  activityTags.value.forEach(item => {
    if (item.active) {
      queryParams.value.tagIds.push(item.active)
    }
  })
  getActivityList(queryParams.value).then(res => {
    console.log(res)
    activityList.value = res.data.list;
    activityList.value.forEach(item => {
      const startTimeMs = dayjs(item.endTime * 1000).valueOf();
      const nowMs = dayjs().valueOf();
      const distance = startTimeMs - nowMs;
      if (distance < 0) {
        item.canSignup = false;
      } else {
        item.canSignup = true;
      }
    })
    total.value = res.data.total;
  })
}

const getActivityListFunSSR = async () => {
  const res = await postApi('/activity/p/list', {
    params: queryParams.value
  });
  activityList.value = res.data.list;
  activityList.value.forEach(item => {
    const startTimeMs = dayjs(item.endTime * 1000).valueOf();
    const nowMs = dayjs().valueOf();
    const distance = startTimeMs - nowMs;
    if (distance < 0) {
      item.canSignup = false;
    } else {
      item.canSignup = true;
    }
  })
  total.value = res.data.total;
}

getActivityListFunSSR();


const activityTags = ref([])
// 搜索条件
const getActivityTagsFun = async () => {
  getActivityTags().then(res => {
    if (res?.data.items.length > 0) {
      activityTags.value = res.data.items.map(item => Object.assign(item, { active: '' }))
    }

  })
}

const router = useRouter()
const goDetails = (data) => {
  const targetRoute = router.resolve({ path: '/activity/activePage', query: { id: data.id } });
  window.open(targetRoute.href, '_blank');
}
</script>

<template>
  <div class="homePage-content active-list-page">
    <div class="scroll-box">
      <client-only>
        <el-carousel autoplay interval="5000">
          <el-carousel-item v-for="item in topActivityList" :key="item.id">
            <img :src="item.imageUrl" alt="" class="scrollAds" @click="goDetails(item)">
          </el-carousel-item>
        </el-carousel>
      </client-only>
    </div>
    <div class="active-list-content">
      <div class="left-list">
        <div class="search-content">
          <div class="search-list" @click="getActivityListFun">
            <div class="search-list-item" v-for="(item, index) in activityTags" :key="index">
              <span class="search-name">{{ item.name }}</span>
              <div class="title-switch">
                <ul>
                  <li @click="item.active = ''" :class="{ 'switch-active': item.active === '' }"> 全部
                  </li>
                  <li @click="item.active = tag.id" v-for="(tag, i) in item.tags" :key="i"
                    :class="{ 'switch-active': item.active === tag.id }">{{ tag.name }}
                  </li>
                </ul>
              </div>
            </div>
            <div class="search-list-item">
              <span class="search-name">时间</span>
              <div class="title-switch">
                <ul>
                  <li @click="queryParams.timeFilter = ''" :class="{ 'switch-active': queryParams.timeFilter === '' }">
                    全部
                  </li>
                  <li @click="queryParams.timeFilter = 'week'"
                    :class="{ 'switch-active': queryParams.timeFilter === 'week' }">本周
                  </li>
                  <li @click="queryParams.timeFilter = 'month'"
                    :class="{ 'switch-active': queryParams.timeFilter === 'month' }">本月
                  </li>
                  <li @click="queryParams.timeFilter = 'next_month'"
                    :class="{ 'switch-active': queryParams.timeFilter === 'next_month' }">下月
                  </li>
                </ul>
              </div>
              <div class="keyword-box">
                <el-input placeholder="搜索活动" v-model="queryParams.keyword" :suffix-icon="Search"
                  @change="getActivityListFun"></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="active-card-box">
          <div class="active-card" v-for="(item, index) in activityList" :key="index" @click="goDetails(item)">
            <div class="card-head-img">
              <el-image class="card-img" :src="item.thumb" :fit="fit" />
            </div>
            <div class="card-content">
              <div class="card-title line-clamp-2 cursor-pointer" :alt="item.title">{{ item.title }}</div>
              <div class="active-info active-info-long-line">
                <div class="active-info-item">
                  <div class="icon1"></div>
                  <span> <date-convert :date="item.startTime"></date-convert> </span>

                </div>
                <div class="active-info-item">
                  <div class="icon2"></div>
                  <span>{{ item.city }}</span>
                </div>
              </div>
              <div class="active-info ">
                <div class="icon3"></div>
                <span class="num">{{ item.viewCount }}</span>
                <div class="icon4"></div>
                <span class="num">{{ item.favoriteCount }}</span>
                <div class="icon5"></div>
                <span class="num">{{ item.likeCount }}</span>
                <template v-if="item.canSignup">
                  <div class="check-btn" v-if="item.registerStatus === 1">已参与</div>
                  <div class="check-btn" v-else>马上报名</div>
                </template>
                <template v-else>
                  <div class="check-btn-disabled">已结束</div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-pagination">
          <div class="total">共{{ total }}项数据</div>
          <el-pagination style="justify-content: center" background layout="prev, pager, next" :total="total"
            v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
            @size-change="getActivityListFun" @current-change="getActivityListFun" />
        </div>
      </div>
      <div class="right-list">
        <div class="wx-code-box">
          <div class="qr-code"></div>
          <div class="qr-title">关注贸行四海，第一时间掌握最新出海活动</div>
        </div>
        <!-- <img src="../../assets/images/test/ad5.png" alt=""> -->

        <CommunityList />
        <div class="right-a-box" v-if="hotRecommend">
          <div class="right-a-box-title">
            <span>热门活动</span>
            <span class="more-text" @click="goDetails(hotRecommend)">更多</span>
            <span class="more-icon"></span>
          </div>
          <div class="hot-activity-box">
            <div class="hot-img">
              <img :src="hotRecommend?.thumb" alt="">
            </div>
            <div class="hot-title">{{ hotRecommend?.title }}</div>
            <div class="active-info">
              <div class="info-item">
                <i class="icon1"></i>
                <DateConvert :date="hotRecommend?.startTime" />
              </div>
              <div class="info-item">
                <i class="icon2"></i>
                {{ hotRecommend?.city }}
              </div>
            </div>
            <div class="active-info-icon-list">
              <div class="icon3"></div>
              <span class="num">{{ hotRecommend?.viewCount }}</span>
              <div class="icon4"></div>
              <span class="num">{{ hotRecommend?.favoriteCount }}</span>
              <div class="icon5"></div>
              <span class="num">{{ hotRecommend?.likeCount }}</span>
              <div class="check-btn"></div>

              <div class="submit" @click="goDetails(hotRecommend)">立即报名</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.active-list-page {
  .scroll-box {
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;

    @media screen and (max-width: 991px) {
      height: 200px;
    }
  }

  .scrollAds {
    object-fit: contain;
    height: 480px;
    margin: 0 auto;
    width: 100%;
    object-fit: fill;

    @media screen and (max-width: 991px) {
      height: 200px;
    }
  }

  .active-list-content {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;

    .left-list {
      background: #ffffff;
      border-radius: 10px;
      padding: 20px;
      flex: 1;
    }

    .search-list {
      border-bottom: 1px solid #EFF1F5;
      padding-bottom: 10px;
    }

    .search-list-item {
      display: flex;
      align-items: flex-start;
      width: 100%;

      line-height: 30px;

      @media screen and (max-width: 991px) {
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .search-name {
        font-size: 16px;
        margin-right: 10px;

        @media screen and (max-width: 991px) {
          flex-shrink: 0;
          height: 30px;
          line-height: 30px;
          margin-top: 5px;
        }
      }
    }

    .title-switch {
      flex: 1;
    }

    .title-switch ul {
      display: inline-flex;
      margin: 5px 0;
      /* background: #D7DAE0; */
      border-radius: 0;
      color: #737373;
      position: relative;
      /* overflow: hidden; */
      flex-wrap: wrap;
      height: auto;

      @media screen and (max-width: 991px) {
        flex-wrap: wrap;
        background: none;
        border-radius: 40px;
        border-radius: 0;
      }

      li {
        cursor: pointer;
        font-size: 14px;
        color: #666666;
        display: flex;
        align-items: center;
        justify-content: center;
        /* border-radius: 40px; */
        padding: 0 20px;

        @media screen and (max-width: 1100px) {
          padding: 0 10px;
          flex-shrink: 0;
          height: 30px;
        }
      }

      .switch-active {
        background: #0063E5;
        color: #ffffff;
      }
    }

    .keyword-box {
      margin-left: auto;

      @media screen and (max-width: 991px) {
        width: 100%;
      }
    }

    .active-card-box {
      border-radius: 10px;
      background: #ffffff;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
      margin-top: 10px;

      @media screen and (max-width: 1400px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      @media screen and (max-width: 791px) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }

      .active-card {
        border: 1px solid #E1E6F0;
        border-radius: 10px;
        position: relative;

        &:nth-child(3n) {
          margin-right: 0;
        }

        .card-head-img {
          height: 170px;
          width: 100%;
          border-radius: 10px;
          overflow: hidden;

          .card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .card-title {
          margin: 10px 0;
          padding: 0 10px;
          height: 36px;
          line-height: 18px;

        }

        .active-info {
          display: flex;
          align-items: center;
          font-size: 14px;
          margin-bottom: 8px;
          padding: 0 10px;
          color: #999999;
          flex-wrap: wrap;

          .active-info-item {
            width: 100%;
            line-height: 14px;
            display: flex;
            align-items: flex-start;
            margin: 4px 0;
          }

          .icon1 {
            background: url("~/assets/images/activity/card-icon1.png") no-repeat;
            width: 14px;
            height: 14px;
            margin-right: 7px;
            background-size: 100% 100%;
            flex-shrink: 0;
          }

          .icon2 {
            background: url("~/assets/images/activity/card-icon2.png") no-repeat;
            width: 14px;
            height: 14px;
            margin-right: 7px;
            background-size: 100% 100%;
            flex-shrink: 0;
          }

          .icon3 {
            background: url("~/assets/images/activity/card-icon3.png") no-repeat;
            width: 18px;
            height: 14px;
            background-size: 100% 100%;
          }

          .icon4 {
            background: url("~/assets/images/activity/card-icon4.png") no-repeat;
            width: 15px;
            height: 14px;
            background-size: 100% 100%;
          }

          .icon5 {
            background: url("~/assets/images/activity/card-icon5.png") no-repeat;
            width: 14px;
            height: 14px;
            background-size: 100% 100%;
          }

          .num {
            margin-right: 17px;
            margin-left: 7px;
          }

          .check-btn {
            position: absolute;
            right: 0;
            bottom: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(275deg, #F29130 0%, #F25130 100%);
            color: #ffffff;
            font-size: 14px;
            padding: 2px 8px;
            border-radius: 10px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            cursor: pointer;
          }

          .check-btn-disabled {
            position: absolute;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            padding: 2px 8px;
            border-radius: 10px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            background: #999999;
            color: #ffffff;
            cursor: pointer;
          }
        }

      }
    }

    .bottom-pagination {
      margin-top: 10px;
      display: flex;
      align-items: center;
      color: #666666;
      font-size: 14px;
      justify-content: space-between;
    }

    .right-list {
      width: 25%;
      margin-left: 10px;

      @media screen and (max-width: 1300px) {
        width: 30%;
      }

      @media screen and (max-width: 991px) {
        display: none;
      }

      .wx-code-box {
        background: #ffffff;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

        @media screen and (max-width: 1400px) {
          height: 100px;
        }

        padding: 6px;
        display: flex;
        align-items: center;
        border-radius: 10px;
        margin-bottom: 10px;

        .qr-code {
          background: url("~/assets/images/activity/qrcode.png") no-repeat;
          width: 100px;
          height: 100px;
          flex-shrink: 0;
          background-size: 100% 100%;

          @media screen and (max-width: 1400px) {
            width: 100px;
            height: 100px;
          }
        }

        .qr-title {
          font-size: 16px;
          font-weight: 500;
          line-height: 26px;
          color: #0063E5;

          @media screen and (max-width: 1400px) {
            font-size: 14px;
            line-height: 20px;
          }
        }
      }

      .right-a-box {
        padding: 10px;
        width: 100%;
        border-radius: 10px;
        margin-top: 10px;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        background: #ffffff;

        img {
          width: 100%;
          height: 100%;
        }

        .right-a-box-title {
          font-size: 18px;
          font-weight: bold;
          line-height: 34px;
          display: flex;
          align-items: center;
        }

        .more-text {
          font-size: 16px;
          font-weight: 500;
          line-height: 24px;
          color: #0063E5;
          margin-left: auto;
          cursor: pointer;
        }

        .more-icon {
          background: url("~/assets/images/activity/arrow.png") no-repeat;
          width: 8px;
          height: 12px;
          margin-left: 5px;
        }

        .hot-activity-box {

          .hot-img {
            width: 100%;

            img {
              width: 100%;
              border-radius: 10px;
            }
          }

          .hot-title {
            font-size: 14px;
            font-weight: 500;
            line-height: 28px;
            margin-top: 6px;
            margin-bottom: 6px;
          }

          .active-info {
            display: flex;
            font-size: 14px;
            line-height: 20px;
            flex-direction: column;
            margin-bottom: 10px;
            color: #999999;
            position: relative;

            .info-item {
              display: flex;
            }

            .icon1 {
              background: url("~/assets/images/activity/card-icon1.png") no-repeat center;
              background-size: 14px 14px;
              width: 20px;
              height: 20px;
              margin-right: 7px;
              background-position-x: center;
              background-position-y: center;
            }

            .icon2 {
              background: url("~/assets/images/activity/card-icon2.png") no-repeat;
              background-size: 14px 14px;
              width: 20px;
              height: 20px;
              margin-right: 7px;
              background-position-x: center;
              background-position-y: center;
              flex-shrink: 0;
            }
          }

          .active-info-icon-list {
            display: flex;
            align-items: center;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 20px;
            color: #999999;
            position: relative;

            .submit {
              position: absolute;
              right: -10px;
              bottom: -20px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 80px;
              height: 30px;
              color: #ffffff;
              border-radius: 60px;
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
              background: linear-gradient(260deg, #004FD9 0%, #33A0FF 96%);
              cursor: pointer;

              @media screen and (max-width: 1300px) {
                width: auto;
                padding: 0 8px;
                height: 26px;
              }
            }

            .icon3 {
              background: url("~/assets/images/activity/card-icon3.png") no-repeat;
              width: 18px;
              height: 14px;
            }

            .icon4 {
              background: url("~/assets/images/activity/card-icon4.png") no-repeat;
              width: 15px;
              height: 14px;
            }

            .icon5 {
              background: url("~/assets/images/activity/card-icon5.png") no-repeat;
              width: 14px;
              height: 14px;
            }

            .num {
              margin-right: 10px;
              margin-left: 4px;
            }

            .check-btn {
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(255deg, #004FD9 1%, #33A0FF 96%);
              color: #ffffff;
              font-size: 14px;
            }
          }
        }
      }
    }

  }
}
</style>